<template>
	<view class="container">
		<view class="formBox">
			<u--form labelPosition="top" labelWidth="auto" :model="model" :rules="rules" ref="form">
				<text class="visitor-title">拜访业主</text>
				<u-form-item style="margin-top: 20rpx;" label="姓名:" prop="name" borderBottom>
					<u--input v-model="model.name" placeholder="请输入姓名" border="none"></u--input>
				</u-form-item>
				<!-- <u-form-item label="联系电话:" prop="phonenumber" borderBottom>
					<u--input v-model="model.phonenumber" placeholder="请输入联系电话" border="none"></u--input>
				</u-form-item> -->
				<u-form-item style="margin-bottom: 20rpx;" label="地址:" prop="address" borderBottom>
					<u--input v-model="model.address" placeholder="请输入地址 例:1#101" border="none"></u--input>
				</u-form-item>
				<text class="visitor-title">申请人</text>
				<u-form-item style="margin-top: 20rpx;" label="姓名:" prop="visitName" borderBottom>
					<u--input v-model="model.visitName" placeholder="请输入姓名" border="none"></u--input>
				</u-form-item>
				<u-form-item label="联系电话:" prop="phonenumber" borderBottom>
					<u--input v-model="model.phonenumber" placeholder="请输入联系电话" border="none"></u--input>
				</u-form-item>
				<u-form-item label="身份证:" prop="identityCard" borderBottom>
					<u--input v-model="model.identityCard" placeholder="请输入身份证" border="none"></u--input>
				</u-form-item>
				<u-form-item label="到访时间:" prop="time" @click="opneChangeData()" borderBottom>
					<u--input v-model="model.startTime" disabled disabledColor="#ffffff" placeholder="请选择访问时间"
						border="none">
					</u--input>
				</u-form-item>
				<u-form-item label="来访事由:" prop="reason">
					<u--textarea v-model="model.reason" placeholder="请输入来访事由" height="200" ></u--textarea>
				</u-form-item>
			</u--form>
			<u-gap height="64"></u-gap>
			<u-button type="primary" text="提交" @click="submit"></u-button>
			<!-- <u-gap height="32"></u-gap>
			<u-button type="error " text="重置" @click="reset"></u-button> -->
			<u-gap height="16"></u-gap>
			<!-- 选择时间 -->
			<u-datetime-picker placeholder="请选择到访时间"  :show="show" v-model="time" mode="datetime" @close="show = false" @cancel="show = false" @confirm="getDateConfirm"></u-datetime-picker>

		</view>
	</view>
</template>

<script>
	import api from '@/api/api.js';
	export default {
		name: '',
		components: {},
		data() {
			return {
				visitUserId:null,
				id:null,
				show:false,
				time:Number(new Date()),
				model: {
					
					name: null, //被访人姓名
					address: null, //被访人住址
					visitName: null, //拜访人姓名
					phonenumber:null,//拜访人手机号
					identityCard:null,//拜访人身份证
					startTime:null,//拜访人到访时间
					reason:null,//来访事由
				},
				rules: {
					name: [{
						type: 'string',
						required: true,
						message: '被访人姓名不能为空',
						trigger: ['blur', 'change']
					}, {
						pattern: /^([\u4e00-\u9fa5·]{2,16})$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							console.log(value)
							return String(value);
						},
						message: '请输入中文姓名'
					}],
					address: [{
						type: 'string',
						required: true,
						message: '被访人住址不能为空',
						trigger: ['blur', 'change']
					}],
					visitName: [{
						type: 'string',
						required: true,
						message: '拜访人姓名不能为空',
						trigger: ['blur', 'change']
					}, {
						pattern: /^([\u4e00-\u9fa5·]{2,16})$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							console.log(value)
							return String(value);
						},
						message: '请输入中文姓名'
					}],
					phonenumber: [{
						type: 'string',
						required: true,
						message: '拜访人手机号不能为空',
						trigger: ['blur', 'change']
					}, {
						pattern: /^((\+|00)86)?1[3-9]\d{9}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请输入正确手机号'
					}],
					identityCard: [{
						type: 'string',
						required: true,
						message: '拜访人身份证不能为空',
						trigger: ['blur', 'change']
					}, {
						pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '请输入正确身份证号码'
					}],
					startTime: [{
						type: 'string',
						required: true,
						message: '拜访人到访时间不能为空',
						trigger: ['blur', 'change']
					}],
					reason: [{
						type: 'string',
						required: true,
						message: '来访事由不能为空',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onLoad(option){
			if(option.id!=undefined){
				this.id=option.id
			}
		},
		created() {
			if(this.id!=null){
				this.getDetails()
			}
		},
		mounted() {},
		destroyed() {},
		methods: {
			// 回显数据
			getDetails(){
				let data={
					id:this.id
				}
				api.getVisitorDetails(data).then(res=>{
					if(res.data.code==200){
						let data = res.data.data
						this.model.name = data.name
						this.model.address = data.address
						this.model.visitName = data.visitName
						this.model.phonenumber = data.phonenumber
						this.model.identityCard = data.identityCard
						this.model.startTime = data.startTime
						this.model.reason = data.reason
					}
				})
			},
			// 点击重置
			// reset(){
			// 	this.model.name = null
			// 	this.model.address = null
			// 	this.model.visitName = null
			// 	this.model.phonenumber = null
			// 	this.model.identityCard = null
			// 	this.model.startTime = null
			// 	this.model.reason = null
			// },
			// 点击提交
			submit() {
				
				this.$refs.form.validate().then(res => {
					if(this.id==null){
						let userInfo = uni.getStorageSync('userInfo')
						let data={
							visitUserId: userInfo.id,
							name:this.model.name,
							address:this.model.address,
							visitName:this.model.visitName,
							phonenumber:this.model.phonenumber,
							identityCard:this.model.identityCard,
							startTime:this.model.startTime,
							reason:this.model.reason
						}
						api.addVisitor(data).then(res=>{
							console.log('新增')
							if(res.data.code==200){
								uni.$u.route({
									type:"navigateBack",
									url: "/pages/visitor/list"
								});
							}
						})
					}else{
						let userInfo = uni.getStorageSync('userInfo')
						let data={
							userId: userInfo.id,
							name:this.model.name,
							address:this.model.address,
							visitName:this.model.visitName,
							phonenumber:this.model.phonenumber,
							identityCard:this.model.identityCard,
							startTime:this.model.startTime,
							reason:this.model.reason,
							id:this.id
						}
						api.editVisitor(data).then(res=>{
							console.log('修改')
							if(res.data.code==200){
								uni.$u.route({
									type:"navigateBack",
									url: "/pages/visitor/list"
								});
							}
						})
					}
					console.log(this.model)
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			// 选择日期
			opneChangeData() {
				this.show = true;
			},
			getDateConfirm(e) {
				this.time = e.value
				this.model.startTime = uni.$u.timeFormat(e.value, 'yyy-mm-dd hh:MM');
				this.show = false;
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: calc(100% - 64rpx);
		padding: 0 32rpx;
	}

	.formBox {
		width: calc(100% - 64rpx);
		padding: 16rpx 32rpx;
		border-radius: 8rpx;
		background-color: #FFFFFF;
		margin: 16rpx 0;
		.visitor-title{
			color: #17abe3;
			font-size: 30rpx;
			font-weight: bold;
			padding-bottom: 10rpx;
			border-bottom: 6rpx transparent solid;
			border-image: linear-gradient(to right,#17abe3,#fff) 1 1;
		}
	}
</style>
